<template>
    <div class="remenpt">
        <backzj :mssg='aaa'/>
        <div class="rmsas">
        <!-- 商品区域 -->
        <div class="xpt" v-for="(item,index) in arr" :key='index'>
            <div class="xtop">
                <div class="xleft">
                    <div class="ximg">
                        <span class="xtuan">3人团</span>
                    </div>
                </div>
                <div class="xjs"><span class="cored">3</span>人拼中商品,<span class="cored">3</span>人各得<span class="cored">￥99.9</span></div>
                <div class="xdiqi">第1期</div>
            </div>
            <div class="xbtop">
                <div class="xbleft">
                    <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
                </div>
                <div class="xbright">
                    <div class="xbjs">还是点击康复护理盛开的花分手快乐待发货山东科技发挥莱克斯顿发话了水电费开了房</div>
                    <div class="xbptt">
                        <p class="xbjq">拼团价<span class="orange">￥99.9</span></p>
                        <p class="xbjq">单品价<span class="xbsc">￥99.9</span></p>
                    </div>
                    <div class="bjdu">
                        <div class="jindt">
                            <el-progress :percentage="50" :show-text="false" color="#f4793b"></el-progress>
                        </div>
                        <div class="jdtsz">5/10</div>
                    </div>
                    <div class="xrhd">截止：2021-06-32 12:00:00</div>
                </div>
            </div>
        </div>
        <!-- 商品区域 -->
        </div>
    </div>
</template>

<script>
import backzj from '../components/backzj.vue'
export default {
  components: { backzj },
    data() {
        return {
            DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
            SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
            arr:[1,1,1,1,1,1],
            aaa:'热门拼团'
        }
    },
    methods: {
        
    },
}
</script>

<style scoped>
.rmsas{
    width: 100%;
    height: calc(100vh - 40px);
    overflow-y: auto;
}
/* 商品区域 */
.xpt{
  display: flex;
  flex-direction: column;
  margin: 4px 0 16px 0;
}
.xtop{
  width: 100%;
  display: flex;
  align-items: center;
  background: #eee;
  justify-content: space-between;
  margin: 0 auto;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 10px;
}
.xleft{
  display: flex;
  align-items: center;
  /* margin-left: 10rpx; */
}
.ximg{
  width: 88px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #f8df95;
  border-radius: 6px 50px 50px 6px;
}
.ximg img{
    max-width: 100%;
    max-height: 100%;
}
.xtuan{
  margin-right: 12px;
}
.xjs{
  margin-left: 5px;
}
.cored{
  color:#FF3333;
}
.xbtop{
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-top: 6px;
}
.xbleft{
  width: 110px;
  height: 110px;
  border: 1px solid gainsboro;
  border-radius: 4px;
  margin-right: 10px;
}
.xbleft img{
  max-width: 100%;
  max-height: 100%;
}
.xbright{
  width: 65%;
  /* border: 1rpx solid red; */
  display: flex;
  flex-direction: column;
}
.xbjs{
  font-weight: 700;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.xbptt{
  display: flex;
  align-items: center;
  margin: 3px 0;
}
.xbjq{
  font-size: 15px;
  font-weight: 400;
  margin-right: 15px;
}
.orange{
  color: #f07244;
}
.xbsc{
  font-size: 15px;
  font-weight: 400;
  text-decoration:  line-through;
  color: #999999;
}
.bjdu{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jindt{
    width: 80%;
}
.jdtsz{
    color: #666;
    font-size: 14px;
}
.xrhd{
  font-size: 12px;
  font-weight: 700;
}
/* 商品区域 */
</style>